<!--
 * @Author: chunlai
 * @Date: 2023-12-07 08:51:59
 * @LastEditTime: 2025-08-01 11:52:02
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\index\index.vue
 * @Description: 投保产品首页
-->
<template>
  <div class="home-index">
    <TopBanner></TopBanner>
    <div class="mt10">
      <PlanDutyDesc v-if="insuPlan && insuPlan.length > 0"></PlanDutyDesc>
      <template v-else-if="zeRenList.length > 0">
        <InsureDutyDesc></InsureDutyDesc>
      </template>
    </div>
    <TabModule class="mt10"></TabModule>
    <div class="foot-warn">
      <p>本页面仅用于产品宣传使用，具体内容请以保险合同为准</p>
      <p>本产品由民盛保险代理有限公司销售</p>
    </div>
    <div class="fix_foot_box">
      <div class="actionBox">
        <div
          class="icon_text_box"
          v-if="showDiscount"
          @click="$refs.highRewardRef.initModule()"
        >
          <img :src="`${imgUrlPath}/icons/zhejia.png`" alt="" />
          <div class="btn_text">折价系数</div>
        </div>
        <div class="icon_text_box" @click="feePreCount">
          <img :src="`${imgUrlPath}/iconfont/count.png`" class="count" />
          <div class="btn_text ftc4">保费试算</div>
        </div>
        <div class="btn-r">
          <div class="btn-click btn_bg2" @click="shareAction" v-if="showShare">
            立即宣传
          </div>
          <div
            class="btn-click btn_bg"
            :class="showNextBtn ? 'btn_bg' : 'btn_bg3'"
            @click="goInsureNow"
            v-else
          >
            立即投保
          </div>
        </div>
      </div>
    </div>
    <HighRewardTable ref="highRewardRef"></HighRewardTable>
    <InsurePreNotice ref="insureNoticeRef"></InsurePreNotice>
    <InsurePreCount
      ref="preCountRef"
      @close="
        show = false;
        goInsureNow();
      "
      v-if="show"
    />
    <RecordWarnTip
      ref="recordRef"
      @sure="
        showTip = false;
        onLineNext();
      "
      @close="showTip = false"
      v-if="showTip"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TopBanner from "./components/TopBanner";
import InsureDutyDesc from "./components/InsurDutyDesc";
import TabModule from "./components/TabModule";
import PlanDutyDesc from "./components/PlanDutyDesc";
import HighRewardTable from "./components/HighRewardTable";
import InsurePreNotice from "./components/InsurePreNotice";
import InsurePreCount from "./components/precount/InsurePreCount";
import RecordWarnTip from "./components/RecordWarnTip";
import { insureBtnMixin } from "@/mixins/edit";

export default {
  name: "HomeIndex",
  components: {
    TopBanner,
    PlanDutyDesc,
    TabModule,
    InsureDutyDesc,
    HighRewardTable,
    InsurePreNotice,
    InsurePreCount,
    RecordWarnTip,
  },
  data() {
    return {
      show: false,
      showTip: false,
    };
  },
  computed: {
    ...mapGetters({
      hasSaleAuth: "agent/hasSaleAuth",
      insuPlan: "home/insuPlan",
      mustReadPop: "home/mustReadPop",
      insuQuDao: "page/insuQuDao",
      lowerPrice: "varietyInfo/lowestPrice",
      dutys: "varietyInfo/dutys",
      dutysConfig: "page/dutysConfig",
      abutmentType: "varietyInfo/abutmentType",
      shareUrl: "varietyInfo/shareUrl",
      highRewards: "varietyInfo/highRewards",
    }),
    zeRenList() {
      let res = this.dutys || [];
      if (this.dutysConfig.length > 0) {
        res = this.dutysConfig;
      }
      return res;
    },
    // 显示折价系数 (在APP中，且有返回折价系数)
    showDiscount() {
      let flag = false;
      if (this.origin == "ms" && this.highRewards.length > 0) {
        flag = true;
      }
      return flag;
    },
    /**显示立即宣传按钮 */
    showShare() {
      let flag = false;
      // 显示条件 在APP内
      if (this.origin == "ms") {
        flag = true;
        // 1.有销售权限的
        if (this.hasSaleAuth == "0" && this.insuQuDao == "2") {
          flag = false;
        }
      }
      return flag;
    },
    // 投保按钮
    showNextBtn() {
      let flag = false;
      // 2.不在APP内显示的互联网险种
      if (this.hasSaleAuth == "0") {
        if (this.origin != "ms") {
          flag = true;
        }
        if (this.origin == "ms" && this.insuQuDao == "2") {
          flag = true;
        }
      }
      return flag;
    },
  },
  mixins: [insureBtnMixin],
  mounted() {
    if (this.mustReadPop != "1" && this.instype == "0" && !this.showShare) {
      this.$refs.insureNoticeRef.initModule();
    }
  },
  methods: {
    feePreCount() {
      this.show = true;
      this.$nextTick(() => {
        this.$refs.preCountRef.initModule();
      });
    },
    recordWarnPop() {
      this.showTip = true;
      this.$nextTick(() => {
        this.$refs.recordRef.initModule();
      });
    },
    shareAction() {
      this.$router.push("/poster");
    },
    goInsureNow() {
      if (this.showNextBtn) {
        this.recordWarnPop();
      } else {
        this.$baseAlert("此产品与保险代理人可销售区域不相符，请联系保险代理人");
      }
    },
    /**互联网险种下一步-- */
    onLineNext() {
      if (this.abutmentType == "1") {
        // H5对接
        if (this.shareUrl) {
          window.location.replace(`${this.shareUrl}?workNum=${this.workNum}`);
        } else {
          this.$baseAlert(`未配置投保链接`);
        }
      } else {
        // API对接
        console.log("互联网API对接");
        this.toInsure();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.foot-warn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  line-height: 2;
  background-color: #f5f5f9;
  padding-bottom: 90px;
}

.actionBox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 55px;
  padding: 0 12px;
  .btn-r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;

    .btn-click {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 210px;
      height: 40px;
      color: #fff;
      font-size: 18px;
      line-height: 40px;
      border-radius: 34px;
      padding: 0 15px;

      &:active {
        opacity: 0.7;
      }
    }
  }
}
.count {
  width: 20px;
}
.icon_text_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
  .btn_text {
    font-size: 12px;
    color: #1b1b1b;
    line-height: 18px;
    margin-top: 3px;
  }
}
</style>
